<script setup>
import { RouterLink, RouterView, useRoute } from 'vue-router'

const route = useRoute()

</script>

<template>
  <div style="height: 100vh;width: 100vw;display: flex;">
    <div style="height: 100%;width: 200px;padding:8px;box-sizing: border-box;display: flex;flex-direction: column;background-color: black;">
      <div style="height:40px;width: 100%;display: flex;justify-content: center;align-items: center;font-size: 24px;">
        <RouterLink to="/base" :style="{color: route.path.startsWith('/base') ? 'red' : 'blue'}">主应用</RouterLink>
      </div>
      <div style="height:40px;width: 100%;display: flex;justify-content: center;align-items: center;font-size: 12px;">
        <RouterLink to="/base/basePage1" :style="{color: route.path === '/base/basePage1' ? 'red' : 'blue'}">主应用下级页面1</RouterLink>
      </div>
      <div style="height:40px;width: 100%;display: flex;justify-content: center;align-items: center;font-size: 12px;">
        <RouterLink to="/base/basePage2" :style="{color: route.path === '/base/basePage2' ? 'red' : 'blue'}">主应用下级页面2</RouterLink>
      </div>
      <div style="height:40px;width: 100%;display: flex;justify-content: center;align-items: center;font-size: 24px;">
        <RouterLink to="/child/vue1" :style="{color: route.path.startsWith('/child/vue1') ? 'red' : 'blue'}">子应用vue1</RouterLink>
      </div>
      <div style="height:40px;width: 100%;display: flex;justify-content: center;align-items: center;font-size: 12px;">
        <RouterLink to="/child/vue1/vue1Page1" :style="{color: route.path === '/child/vue1/vue1Page1' ? 'red' : 'blue'}">子应用vue1下级页面1</RouterLink>
      </div>
      <div style="height:40px;width: 100%;display: flex;justify-content: center;align-items: center;font-size: 12px;">
        <RouterLink to="/child/vue1/vue1Page2" :style="{color: route.path === '/child/vue1/vue1Page2' ? 'red' : 'blue'}">子应用vue1下级页面2</RouterLink>
      </div>
      <div style="height:40px;width: 100%;display: flex;justify-content: center;align-items: center;">
        <RouterLink to="/child/vue2" :style="{color: route.path === '/child/vue2' ? 'red' : 'blue'}">子应用vue2</RouterLink>
      </div>
    </div>
    <div style="height: 100%;width: calc(100% - 200px);">
        <RouterView />
        <div id="childContainer" style="width:100%;height:100%;" :style="{display: route.path.startsWith('/base') ? 'none' : 'block'}"></div>
    </div>
  </div>
</template>

<style scoped>

</style>
